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Om jQuery Mobile 
Dette modul giver en kort introduktion til jQuery Mobile. 


Om jQuery 
None 


None 


Frameworket 


None 


jQuery Mobile - Strukturering af sider 
Dette modul introducere til strukturering af sider i jQuery Mobile. 


Introduktion 


Når sider skal struktureres i jQuery Mobile er det naturligvis væsentligt at 
have for øje at struktur og standard skal have konsistens. Det er altså vigtigt 
at strukturen afspejler at indholdet skal bruges på en mobilenhed, hvilket i 
sagens natur, både har styrker og svagheder. 


Kolonner 


Kolonner er i mange tilfælde ikke en god løs, når det kommer til brug på 
mobileenheder, fordi kolonnebredden typisk er en udfordring for den 
mobile enhed. Alligevel kan der være tilfælde, hvor brugen af kolonner 
alligevel er nødvendig. I dette eksempel vises et eksempel på, hvordan der 
udarbejdes en 2 x 1 kolonne. 


<div id="fs-id1168018077308" class="ui-grid-a"> 
<div id="fs-id1168002938576" class="ui-block-a"> 
<strong>I'm Block A</strong> and text inside will 
wrap</div> <div id="fs-id1168018086627" class="ui- 
block-b"><strong>I'm Block B</strong> and text 
inside will wrap</div> </div><!-- /grid-a --> 


Folde-sammen-og-rulle-ud-menu 


Idet indholdet på siden skal være tilpasset mobile enheder kan det være en 
god idé umiddelbart at skjule indhold for modtageren for at bevare 
overskueligheden. En af måderne at gøre det på er via en rullemenu, som 
brugeren kan klikke på for at synliggøre nyt indhold. Den kan laves med 
nedenstående kode: 


<div data-role="collapsible"> <h3>I'm a 
header</h3> <p>I'm the collapsible content. By 
default I'm closed, but you can click the header 


to open me.</p> </div> 


Du kan også lave en menu, som automatisk folder ud når siden er indlæst. 
Det gør du ved hjælp af tilføje attributen: 


> <div data-role="collapsible" data- 
collapsed="false"> 


jQuery Mobile - Theming 


Themes 


Med jQuery Mobile kan man benytte temaer, der giver mulighed for at 
tilpasse farveskemaer og visse CSS-aspekter. Man kan bruge jQuery Mobile 
ThemeRoller applikationen for at tilpasse temaerne. Efter at have udviklet 
et tema i ThemeRoller applikationen, kan man hente en brugerdefineret 
CSS-fil og indlejre den i sit projekt og på den måde bruge de 
brugerdefinerede tema. 


Hvert tema kan indeholde op til 26 unikke "farveprøver", som hver består af 
en header bar, en body, og knapper. Kombinationen af de forskellige 
farveprøver giver mulighed for at skabe en bredere vifte af visuelle effekter, 
end man ville være i stand til med kun en farveprøve per tema. Skift mellem 
forskellige farveprøver i et tema er så simpelt som at tilføje en attribut 
kaldet "data-tema" til sine HTML-elementer. 


jQuery Mobile standardtema har fem forskellige farveskemaer: "a"”, "b", 
"c", "d", og "e". På den måde, kan man let skifte mellem forskellige temaer 
ved blot at ændre bogstavet i koden. 


(Kilde:Wikipedia) 
Temaer 


Man kan få mere at vide om temaer her. 


<div data-role="content" data-theme="c"> 
<p>Herman boede i Horsens, men engang var han 
ude at rejse. 


Hvordan linker man til sider i jQuery Mobile 
Hvordan man linker til sider i jQuery Mobile 


Når du laver interne links på en hjemmeside lavet med jQuery Mobile, skal 
du tage højde for, at koden adskiller sig lidt ift. almindelig HTML-kodning. 
Herunder kan du se et eksempel på, hvordan href og id skal bruges til at 
linke i jQuery Mobile. 


Kort forklaring: I den tekst, du linker fra, skal der indgå et href-tag. Dette 
tag skal så indeholde et havelåge-tegn og det id, som du har defineret i den 
side, der linkes til. 


Eksempel 

I følgende eksempel vil vi linke til side 1. Først angiver vi teksten "Side 1" i 
et href-tag, da vi skal linke fra denne tekst. href-tagget indeholder et side1, 
hvilket henviser til id'et på den side, som vi linker til. 


<p><a href="4side1l">Side 1</a></p> 


I nedenstående kode er selve sidens id (side1) defineret. 


<div data-role="page" id="side1l" data- 
title="Side 1"> 

<div data-role="header"> 

<hi>Side 1</hi1> 


I jQuery Mobile kan du også tilføje overgange mellem siderne. Det gør du 
ved hjælp af data-transition - se eksemplet nedenfor. 


<p><a data-transition="slide" 
href="4sidel">Side 1</a></p> 


Video-eksempel 
Herunder kan du se, hvordan koder skal laves og indsættes i jQuery Mobil, 
hvis du vil linke til interne sider. 
Links på jQuery Mobile-sider 
[missing resource: http://www.youtube.com/v/OqLPP70XnVY? 
version=3&hl=en US] 


Sådan laver du navigeringsknapper 


Sådan laver du navigeringsknapper 


Knapper er centrale elementer i Jquery Mobile. Der findes to typer af 
knapper på jQuery Mobile: Formknapper der laves med "input" eller 
"button" tags og navigeringsknapper der laves med et a-tag, hvorefter 
Jquery Mobile automatisk optimerer knapperne til brug på mobile enheder 
for at give en ensartet og optimal brugeroplevelse, på tværs af mobile 
enheder. 


Example: 
Et link vil eksempelvis blive til en navigeringsknap ved at tilføje atributten 
data-role="button" 


<a href="index.html" data-role="button">Link 
button</a> 


Dette vil give følgende resultat: 


Example: 


[missing resource: https://dl.dropbox.com/u/10235806/linkbutton.jpg] 


Note:Både navigationsknap og form knap kan styles med fx. tekst, ikoner, 


placering mv. 


Mini version af navigeringsknap 


Det er også muligt at lave en mini version af navigationsknappen til brug fx 
i menubarer eller hvor pladsen er trang. Dette gøres ved at tilføje data- 
mini="true" 


Dette giver en knap der afviger fra en standard knap ved at være mere 
kompakt og med mindre font størrelse. 

Exercise: 

Lav korrekt kode 


Problem: 


Hvordan skal koden se ud, for at lave en mere kompakt version af en 
navigationsknap? 


Solution: 


<a href="index.html" data-role="button" data- 
mini="true">Link button</a> 


Note:Tilføjelsen af data-mini="true" kan også bruges på form knapper der 
ønskes i en mere kompakt version. 


Prøv selv 


Hvis du selv vil prøve at lave navigationsknapper i jQuery Mobile kan du se 


Her kan du lære mere om JQuery Mobile 
Dette modul giver informationer om hvor du kan lære mere om JQuery 
Mobile. 


Introduktion 

På JQuery Mobiles egen hjemmeside jquerymobile.com kan du finde 
dokumentation, demos, tutorials m.m. samt lister med ressourcer til bl.a. 
artikler, frameworks, apps, værktøjer, extensioner og plugins. Hvis du vil 
vide mere om JQuery Mobile kan du desuden finde referencer til bøger, 
blogs og videoer i de nedenstående lister. 

Bøger 


Bai, Giulio (June 23, 2011). jQuery Mobile First Look (1st ed.). Packt 
Publishing. p. 216. ISBN 1-84951-590-5. 

Reid, Jon (July 7, 2011). jQuery Mobile (ist ed.). O'Reilly Media. p. 
130. ISBN 1-4493-0668-3. 

David, Matthew (September 21, 2011). HTML5 Mobile Websites: 
Turbocharging HTMLS5 with jQuery Mobile, Sencha Touch, and Other 
Frameworks (1st ed.). Focal Press. p. 250. ISBN 0-240-81813-X. 
Broulik, Brad (November 30, 2011). Pro jQuery Mobile (Ist ed.). 
Apress. p. 350. ISBN 1-4302-3966-2. 

Doyle, Matt (December 16, 2011). Master Mobile Web Apps with 
jQuery Mobile (2nd ed.). Elated Communications Ltd. p. 446. ISBN 
978-0-9569218-4-0. 

Dutson, Phil (July 13, 2012). Sams Teach Yourself jQuery Mobile in 
24 Hours (ist ed.). Sams. p. 475. ISBN 0-672-33594-8. 

Holzner, Steven E. (January 2, 2012). Sams Teach Yourself jQuery 
Mobile in 10 Minutes (1st ed.). Sams. p. 240. ISBN 0-672-33557-3. 
Firtman, Maximiliano (January 31, 2012). jQuery Mobile: Up and 
Running (ist ed.). O'Reilly Media. p. 250. ISBN 1-4493-9765-4. 

de Jonge, Adriaan, Dutson, Phillip (November 2, 2012). jQuery, 
jQuery UI, and jQuery Mobile: Recipes and Examples (ist ed.). 
Addison-Wesley Professional. p. 400. ISBN 978-0-321-82208-6. 


Videoer 


e jQuery Mobile Toolbars Navigation Menus 


Blogs 


Mobile App Design/Dev: Beginner's Guide to jQuery Mobile 


Example: 
Eksempel på video-tutorial 
jQuery Mobile tutorial: Creating custom icons 


